<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item>
        <div slot="title" class="wz">! 温馨提示</div>
        <div class="box_1">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
        </div>
        <div class="box_1">
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </div>
      </el-collapse-item>
    </el-collapse>
 
    <div class="box_2">
      <el-button type="primary" @click="tanq()" class="btn_1">添 加</el-button>
    </div>

    <div class="box_4">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="ID" width="320">
            <template slot-scope="scope">
              <div>
                {{ scope.row.id }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="图片" width="320">
            <template slot-scope="scope">
              <img
                :src="scope.row.url"
                style="width: 5vw; height: 5vw"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="状态" width="320">
            <template slot-scope="scope">
              <div>
                {{ scope.row.type ==1?'首页': scope.row.type == 2 ?'咨询' : scope.row.type == 3 ?'生活':'其他'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="danger" @click="shanchu(scope.row.id)"
                  >删除</el-button
                >
                <el-button type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="primary" @click="xiangqing(scope.row.id)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 编辑弹出框 -->
      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="图像路径">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">首页</el-radio>
              <el-radio :label="2">咨询</el-radio>
              <el-radio :label="3">生活</el-radio>
              <el-radio :label="4">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" type="warning"
            >取 消</el-button
          >
          <el-button type="primary" @click="saveEdit(form.id)">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 详情弹出框 -->
      <el-dialog title="详情" :visible.sync="editVisibleqq" width="30%">
          <div class="box_7"><span class="spou">ID</span> {{sdd.id}}</div>
          <div class="box_7"><span class="spou">图片</span><img :src="sdd.url" alt="" style="width: 5vw; height: 5vw"></div>
          <div class="box_7"><span class="spou">状态</span> {{sdd.type==1?'首页': sdd.type == 2 ?'咨询' : sdd.type == 3 ?'生活':'其他'}}</div>
      </el-dialog>
         <!-- 添加弹出框 -->
         <el-dialog title="添加" :visible.sync="editVisibleqqa" width="30%">
          <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-radio-group v-model="radio" class="box_3">
        <el-radio :label="1">首页</el-radio>
        <el-radio :label="2">咨询</el-radio>
        <el-radio :label="3">生活</el-radio>
        <el-radio :label="4">其他</el-radio>
      </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisibleqqa = false" type="warning"
            >取 消</el-button
          >
          <el-button type="primary" @click="add()">确 定</el-button>
        </span>
      </el-dialog>
      <div class="boxfyq">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-size="queryInfo.pagesize"
          :page-sizes="[1, 2, 5, 10]"
          layout="total, sizes, prev, pager, next ,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div style="height:1vw;"></div>
    </div>
  </div>
</template>
<script>
import { postlbt, postsc, posttjtp, getsc ,postxq} from "../feng";
export default {
  data() {
    return {
      form: {
        url:'',
        type:'',
      },
      editVisible: false,
      editVisibleqq: false,
      editVisibleqqa: false,
      imageUrl: "",
      radio: 1,
      activeNames: ["1"],
      tableData: [],
      sdd:[],
      // 总条数
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 显示一页多少条数据
        pagesize: 1,
      },
    };
  },
  created() {
    this.shang();
    this.aqq();
  },
  methods: {
    tanq(){
      this.editVisibleqqa = true;
    },
    //详情
    xiangqing(i){
      this.editVisibleqq = true;
      let gtt = {
        id:i
      }
      postxq(gtt).then(res=>{
        console.log(res.data);
        this.sdd=res.data
      })
    },
     //修改
     saveEdit(i) {
      // console.log(this.form.type)
      this.form.type = `${this.form.type}`;
      let arr = {
        url: this.form.url,
        type: this.form.type,
        id: i,
      };
      console.log(this.form.type);
      this.editVisible = false;
      posttjtp(arr).then((res) => {
        this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
        this.aqq();
        console.log(res);
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.editVisible = true;
      this.form = row;
      if (this.form.type == "首页") {
        this.$set(this.form, "type", 1);
      } else if(this.form.type == "咨询") {
        this.$set(this.form, "type", 2);
      } else if(this.form.type == "生活"){
        this.$set(this.form, "type", 3);
      } else if(this.form.type == "其他") {
        this.$set(this.form, "type", 4);
      }
      console.log(this.form);
    },
    aqq() {
      let add = {
        page: this.queryInfo.pagenum,
        pagelimit: this.queryInfo.pagesize,
      };
      postlbt(add).then((res) => {
        console.log(res.data.data);
        this.total = res.data.pagecount;
        this.tableData = res.data.data;
      });
    },
    handleSizeChange(newsize) {
      //这里conso 选中第几页 最新的值
      console.log(newsize);
      //最新的条数（newsize）赋值给 动态的 pagesie
      this.queryInfo.pagesize = newsize;
      //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
      this.aqq();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      //把最新的页码（newPage）赋值给 动态的 pagenum
      this.queryInfo.pagenum = newPage;
      //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
      this.aqq();
    },
    //添加
    add() {
      let aww = {
        url: this.imageUrl,
        type: this.radio,
      };
      posttjtp(aww).then((res) => {
        console.log(res);
        this.aqq();
        if (res.code == 0) {
          this.$message({
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message({
            message: `警告,${res.msg}`,
            type: "warning",
          });
        }
      });
    },
    //删除
    shanchu(i) {
      let ass = {
        id: i,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getsc(ass).then((res) => {
            console.log(res);
            this.aqq();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    shang() {
      let obj = {
        imgurl: this.imageUrl,
      };
      postsc(obj).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>

.box_7{
  margin-top: 1vw;
}
.spou{
  margin-right: 3vw;
}
.boxfyq {
  margin-top: 1vw;
}
table {
  width: 98%;
  margin-left: 1%;
}
tr {
  height: 3vw;
}
.box_4 {
  background: #fff;
  margin-top: 1vw;
}
.btn_1 {
 margin: 1vw;
}
.box_3 {
  display: flex;
  flex-direction: column;
  height: 7.8vw;
  justify-content: space-between;
  margin-left: 2vw;
}
.box_2 {
  background: #fff;
  height: 5vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.box_1 {
  margin-left: 1vw;
}
.wz {
  margin-left: 1vw;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 1vw;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 8vw;
  height: 8vw;
  line-height: 8vw;
  text-align: center;
}
.avatar {
  width: 8vw;
  height: 8vw;
  display: block;
}
</style>